<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				
				<u-form-item label="会员卡类型" prop="course_category" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.course_category" @click="courseCategoryShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="卡名称" prop="vip_name" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.vip_name" @click="nameShow=true"></u-input>
				</u-form-item>
				<u-form-item label="卡号" prop="card_no">
					<u-input type="text" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.card_no"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="新增方式" prop="mode" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.mode" @click="modeShow=true"></u-input>
				</u-form-item>
				<u-form-item label="开卡设置" prop="setup" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.setup" @click="setupShow=true"></u-input>
				</u-form-item>
				<block v-if="formData.setup_id==2">
					<!-- <u-form-item label="开卡日期" prop="setup_date" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
						<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.setup_date" @click="dateShow=true"></u-input>
					</u-form-item> -->
				</block>
			</view>
			<view class="wd-form-wrapper">
				<u-form-item prop="remarks">
					<u-input type="textarea" placeholder="请输入备注（非必填项）" :placeholder-style="{color: '#999999'}" :clearable="false" height="140" :auto-height="true" v-model="formData.remarks"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">确认开卡</u-button>
			</view>
		</view>
		
		<!-- 选择卡类型 -->
		<u-select mode="single-column" title="请选择卡名称" v-model="courseCategoryShow" :list="courseCategoryList" @confirm="courseCategoryConfirm"></u-select>
		<!-- 选择卡名称 -->
		<u-select mode="single-column" title="请选择卡名称" v-model="nameShow" :list="nameList" @confirm="nameConfirm"></u-select>
		<!-- 选择新增方式 -->
		<u-select mode="single-column" title="请选择新增方式" v-model="modeShow" :list="modeList" @confirm="modeConfirm"></u-select>
		<!-- 选择开卡设置 -->
		<u-select mode="single-column" title="请选择开卡设置" v-model="setupShow" :list="setupList" @confirm="setupConfirm"></u-select>
		<!-- 选择开卡日期 -->
		<u-calendar mode="date" toolTip="请选择开卡日期"  v-model="dateShow" @change="dateChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: 0,
				formData: {
					course_category:'',
					course_category_id: 0,
					vip_name: '',
					vip_id: 0,
					card_no: '',
					mode: '',
					mode_type: 0,
					setup: '',
					setup_id: 0,
					setup_date: '', //批量改成你自己的
					remarks: ''
				},
				rules: {
					//money: [{ required: true, trigger: ['change','blur'], message: '请输入实收金额' }],
				},
				courseCategoryShow: false,
				courseCategoryStatus:false,
				courseCategoryList: [],
				nameShow: false,
				nameList: [],
				modeShow: false,
				modeList: [
					{ value: 1, label: '发新卡' },
					{ value: 2, label: '录旧卡' },
				],
				setupShow: false,
				setupList: [
					{ value: 1, label: '立即开卡' },
					{ value: 2, label: '首次预约开卡' },
					// { value: 2, label: '特定时间开卡' },
				],
				dateToday: '',
				dateShow: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.dateToday = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
		},
		onLoad(options){
			if(options.user_id){
				this.user_id = options.user_id;
				this.fetchCategory();
			}
		},
		methods: {
			//获取分类
			fetchCategory(){
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				this.$core.get({url:'fitness.common/category',data:{shop_id:shop_id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].value = ret.data[i].id;
						ret.data[i].label = ret.data[i].name;
					}
					this.courseCategoryList = ret.data;
				}});
			},
			
			vipLists(){
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				if(shop_id == ''){
					http.toast('场馆信息错误');
					return false;
				}
				var data_id = that.formData.course_category_id;
				this.$core.get({url:'fitness.manage/vip_list',data:{shop_id:shop_id,course_category_id: that.formData.course_category_id,page:1,pagesize: 99},success:(ret)=>{
					for(var i=0;i<ret.data.data.length;i++){
						ret.data.data[i].value = ret.data.data[i].id;
						ret.data.data[i].label = ret.data.data[i].name;
					}
					that.nameList = ret.data.data;
				}});
			},
			//会员卡类型
			courseCategoryConfirm(e) {
				var courseCategoryList = this.courseCategoryList;
				for(var i=0;i<courseCategoryList.length;i++){
					if(courseCategoryList[i].value == e[0].value){
						this.formData.course_category = e[0].label;
						this.formData.course_category_id = e[0].value;
						this.vipLists();
						break;
					}
				}
				this.nameList = []
				this.formData.vip_name = '';
				this.formData.vip_id = 0;
				this.formData.card_no = '';
			},
			// 请选择卡名称
			nameConfirm(e) {
				var cards = this.nameList;
				for(var i=0;i<cards.length;i++){
					if(cards[i].id == e[0].value){
						this.formData.vip_name = e[0].label;
						this.formData.vip_id = e[0].value;
						this.formData.card_no = this.get_random(11);
						break;
					}
				}
			},
			get_random(n){
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
				var res = "";
				for(var i = 0; i < n; i++) {
				    var id = Math.ceil(Math.random() * 35);
				    res += chars[id];
				}
				return res;
			},
			modeConfirm(e){
				this.formData.mode = e[0].label;
				this.formData.mode_type = e[0].value;
			},
			// 请选择开卡设置
			setupConfirm(e) {
				this.formData.setup = e[0].label;
				this.formData.setup_id = e[0].value;
			},
			// 请选择开卡日期
			dateChange(e) {
				this.formData.setup_date = e.result
			},
			submit() {
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var user_id = that.user_id;
						var formData = that.formData;
						var param = that.formData;
						formData['shop_id'] = shop_id;
						formData['user_id'] = user_id;
						this.$core.get({url:'fitness.manage/add_user_card',data: formData,success:(ret)=>{
							this.getOpenerEventChannel().emit("addCardSuccess",{});
							uni.navigateBack({})
							uni.showToast({title: ret.msg,icon:'none'})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
</style>